
<template>
    <div class="app-container">
        <div class="SearchTop image-control">
            <el-form :model="queryParams" ref="queryRef" :inline="true" @submit.native.prevent >   
                <el-form-item label="相册搜索：">
                    <el-input v-model="queryParams.title" placeholder="请输入" clearable @keyup.enter="handleQuery" />
                </el-form-item>     
                <el-form-item style="margin-right: auto;">
                    <el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['resource:group:list']">查询</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    <span style="margin-left:38px;">素材容量:{{capacity.num}}张</span>
                    <span style="margin-left:30px;">容量:{{capacity.takeUpSpace}}/{{capacity.authSpace}}</span>
                </el-form-item>                                                              
                <el-form-item style="float: right;">
                    <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['resource:group:add']">添加相册</el-button>                    
                    <el-button @click="handleSelectionChange" type="info" plain icon="finished">{{isAllChoose ? '全选' :'全部取消'}}</el-button>                    
                    <el-button type="danger" plain icon="Delete"  @click="handleDelete" v-hasPermi="['resource:group:remove']">删除</el-button>                                                          
                </el-form-item> 
            </el-form>
        </div>    
        <div class="tableList" style="height:700px;overflow-y:auto;">
            <template v-if="groupList.length > 0">
                <div class="image-album-wrap" @click="handleDetail(item,$event)" v-for="(item,index) in groupList" :key="index" :class="item.flag ? 'active' : ''">
                    <template v-if="item.internal == '1'">
                        <el-tooltip content="系统相册不可删除,重命名" popper-class="album-popper" placement="top-start" effect="light" offset="10">
                            <div class="album-tip"></div>
                        </el-tooltip> 
                    </template>
                    <template v-else>
                        <div style="display:none;"></div>
                    </template>
                    <div @click="item.flag = !item.flag" class="album-btn"></div>
                    <template v-if="item.internal == '1'">
                        <template v-for="(number,numberIndex) in 4" :key="numberIndex">
                            <template v-if="item.analyImg && item.analyImg[numberIndex]">
                                <video v-if="item.id == 3" :src="item.analyImg[numberIndex]"></video>
                                <img v-else :src="item.analyImg[numberIndex]" alt="">
                            </template>
                            <template v-else>
                                <img  src="@/assets/images/app/albumyou.png" alt="">                        
                            </template>
                        </template>
                    </template>
                    <template v-else>
                        <template v-for="(number,numberIndex) in 4" :key="numberIndex">
                            <template v-if="item.analyImg && item.analyImg[numberIndex]">
                                <img :src="item.analyImg[numberIndex]" alt="">
                            </template>
                            <template v-else>
                                <img  src="@/assets/images/app/albumkong.png" alt="">                        
                            </template>
                        </template>
                    </template>                

                    <!-- <img v-for="item in 2" :key="item" src="@/assets/images/app/albumkong.png" alt=""> -->
                    <!-- <img v-for="item in 2" :key="item" src="@/assets/images/app/albumyou.png" alt=""> -->
                    <span class="album-time">创建日期：{{item.createTime.substring(0,4)}}年{{item.createTime.substring(5,7)}}月{{item.createTime.substring(8,10)}}日</span>
                    <el-tooltip content="快速双击可重命名相册" popper-class="album-popper" placement="bottom-start" effect="light" offset="5">
                        <span @dblclick="handleDb(item)" class="album-name">{{item.title}}</span>
                    </el-tooltip>                  
                </div>
            </template>
            <template v-else>
                <el-empty description="暂无数据" />
            </template>

        </div>   
        <GroupDialog ref="Dialog" @refresh="getList" />  
    </div>
</template>
<script setup>
import GroupDialog from './GroupDialog.vue'
import { resourceCapacity, deleteDataGroup,editResourceGroup,addResourceGroup,resourceGroupList } from "@/api/CMS/image";
import { onMounted, ref } from "vue"
const router = useRouter();
const { proxy } = getCurrentInstance();
const isAllChoose =ref(true)
let data = reactive({
    queryParams: {
        title:'',
    },
    groupList:[],
    capacity:{}
});
const { queryParams,groupList,capacity } = toRefs(data);
// 获取列表
function getList() {
    resourceGroupList(queryParams.value).then(response => {
        if (response.code == 200) {
            groupList.value = response.rows
            groupList.value.forEach(ele=>{
                ele.flag = false
                if(ele.thumbnail && ele.thumbnail != null) {
                    console.log('1')
                    ele.analyImg = ele.thumbnail.split(',')
                }   
            })
            console.log(groupList.value)
        }
    })    
    getCapacity()
}
getList()
function getCapacity() {
    resourceCapacity().then(res => {
        if(res.code == 200) {
            capacity.value = res.data
        }
    })
}
getCapacity()

function handleQuery() {
    getList()
}

function resetQuery() {
    queryParams.value = {}
    handleQuery();
    console.log('reset')
}

function handleAdd() {
    proxy.$refs["Dialog"].add();
}
/** 选择条数  */
function handleSelectionChange() {
    // 全选
    if(isAllChoose.value) {
        groupList.value.forEach(ele => {
            ele.flag = true
        })
    }
    // 全部取消
    else {
        groupList.value.forEach(ele => {
            ele.flag = false
        })        
    }
    isAllChoose.value = !isAllChoose.value
};
// 进入相册
function handleDetail(item,event) {
    if(event.target.className.indexOf('album-name') >= 0 || event.target.className.indexOf('album-btn') >= 0) {
        return
    }
    sessionStorage.setItem('groupData',JSON.stringify(item))
    if(item.id == 3) {
        router.push('/contentManage/articleMaterialCenter/video-detail/index')

    }else {
        router.push('/contentManage/articleMaterialCenter/imageMaterial-detail/index')
    }
}
// 双击修改名称
function handleDb(item) {
    proxy.$refs["Dialog"].edit(JSON.parse(JSON.stringify(item)));
}

/** 删除按钮操作 */
function handleDelete() {
    const ids = []
    console.log(groupList.value)
    groupList.value.map(ele => {
        if(ele.flag) {
            ids.push(ele.id)
        }
    })
    if(ids.length == 0) {
        proxy.$modal.msg('请先选择需要删除的相册')
        return
    }
    proxy.$modal.confirm('是否确认删除').then(function () {
        return deleteDataGroup(ids);
    }).then((res) => {
        if(res.code == 200) {
            getList();
            proxy.$modal.msgSuccess("删除成功");
        }
    }).catch(() => {});
};
</script>
<style lang='scss'>
.SearchTop.image-control {
}
.image-album-wrap.active {
    .album-btn {
        background: url('@/assets/images/app/albumgouxuan.png');
    }
    .span {
        color: #0096FF;
    }
}
.image-album-wrap {
    display: inline-block;
    position: relative;
    width: 294px;
    height: 268px;
    background: #EDEBEB;
    border-radius: 10px;   
    padding:20px;
    box-sizing: border-box; 
    margin-right: 33px;
    margin-bottom: 76px;
    img,video {
        width: 120px;
        height: 90px;
        border-radius: 10px;    
        object-fit: cover;
        margin-bottom: 12px;    
    }
    img:nth-child(2n+1),video:nth-child(2n+1) {
        margin-right:12px;
    }
    span {
        white-space: nowrap;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333; 
        position: absolute;
        left: 50%;
        transform: translateX(-50%);        
    }
    .album-popper {
        border: 2px solid #E4E4E4;
        border-radius: 10px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
    }
    .album-btn {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background: url('@/assets/images/app/albumweixuan.png');
    }
    .album-tip {
        width: 99px;
        height: 81px;
        position: absolute;
        left: 0;
        top: 0;
         background: url('@/assets/images/app/albumtip.png');
    }
    .album-time {
        bottom: 20px;
    }
    .album-name {
        bottom: -30px;
    }
}
.image-album-wrap.active {
    span {
        color: #0096FF;
    }
}
</style>